Ext.define('Writer.Form', {
    extend: 'Ext.form.Panel',
    alias: 'widget.writerform',

    requires: ['Ext.form.field.Text'],

    initComponent: function(){
        this.addEvents('create');
        Ext.apply(this, {
            activeRecord: null,
            iconCls: 'icon-user',
            frame: true,
            title: 'Email Template',
            defaultType: 'textfield',
            bodyPadding: 5,
            fieldDefaults: {
                anchor: '100%',
                labelAlign: 'right'
            },
            items: [{
				xtype: 'displayfield',
				fieldLabel: 'Variables to use',
				value: '{firstname}, {lastname}, {middlename}, {company}, {causeofseparation}, {contactnumber}, {datehired}, {emailaddress}, {personnelid}, {positiontitle}, {dateeffective}'
			},{
                fieldLabel: 'Name',
                name: 'NAME',
                allowBlank: false
            }, {
                fieldLabel: 'Body Template',
                name: 'BODYTEMPLATE',
				value: ' ',
                allowBlank: false,
				xtype: 'htmleditor'
            }, {
                fieldLabel: 'Subject Template',
                name: 'SUBJECTTEMPLATE',
				value: ' ',
                allowBlank: false,
				xtype: 'htmleditor'
            }],
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                ui: 'footer',
                items: ['->', {
                    iconCls: 'icon-save',
                    itemId: 'save',
                    text: 'Save',
                    disabled: true,
                    scope: this,
                    handler: this.onSave
                }, {
                    iconCls: 'icon-user-add',
                    text: 'Create',
                    scope: this,
                    handler: this.onCreate
                }, {
                    iconCls: 'icon-reset',
                    text: 'Reset',
                    scope: this,
                    handler: this.onReset
                }]
            }]
        });
        this.callParent();
    },

    setActiveRecord: function(record){
        this.activeRecord = record;
        if (record) {
            this.down('#save').enable();
            this.getForm().loadRecord(record);
        } else {
            this.down('#save').disable();
            this.getForm().reset();
        }
    },

    onSave: function(){
        var active = this.activeRecord,
            form = this.getForm();

        if (!active) {
            return;
        }
        if (form.isValid()) {
            form.updateRecord(active);
            this.onReset();
        }
    },

    onCreate: function(){
        var form = this.getForm();

        if (form.isValid()) {
            this.fireEvent('create', this, form.getValues());
            form.reset();
        }

    },

    onReset: function(){
        this.setActiveRecord(null);
        this.getForm().reset();
    }
});

Ext.define('Writer.Grid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.writergrid',

    requires: [
        'Ext.grid.plugin.CellEditing',
        'Ext.form.field.Text',
        'Ext.toolbar.TextItem'
    ],

    initComponent: function(){

        this.editing = Ext.create('Ext.grid.plugin.CellEditing');

        Ext.apply(this, {
            iconCls: 'icon-grid',
            frame: true,
            plugins: [this.editing],
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    iconCls: 'icon-delete',
                    text: 'Delete',
                    disabled: true,
                    itemId: 'delete',
                    scope: this,
                    handler: this.onDeleteClick
                }]
            }],
            columns: [{
	            xtype: 'rownumberer',
				locked: true,
	            width: 50,
	            sortable: false
	        },{
                header: 'Name',
                width: 400,
                sortable: true,
                dataIndex: 'NAME'
            }, {
                header: 'Body Template',
                width: 10,
                sortable: true,
				hidden: true,
                dataIndex: 'BODYTEMPLATE'
            }, {
                header: 'Subject Template',
                width: 10,
				hidden: true,
                sortable: true,
                dataIndex: 'SUBJECTTEMPLATE'
            }]
        });
        this.callParent();
        this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
    },
    
    onSelectChange: function(selModel, selections){
        this.down('#delete').setDisabled(selections.length === 0);
    },

    onSync: function(){
        this.store.sync();
    },

    onDeleteClick: function(){
        var selection = this.getView().getSelectionModel().getSelection()[0];
        if (selection) {
            this.store.remove(selection);
        }
    }

});

Ext.define('Writer.Email', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'NAME',
        type: 'string'
    },{
        name: 'BODYTEMPLATE',
        type: 'string'
    },{
        name: 'SUBJECTTEMPLATE',
        type: 'string'
    }]
});
  
//---------------------------------
Ext.define('Writer.ClearingForm', {
    extend: 'Ext.form.Panel',
    alias: 'widget.writerclearanceform',

    requires: ['Ext.form.field.Text'],

    initComponent: function(){
        this.addEvents('create');
        Ext.apply(this, {
            activeRecord: null,
            iconCls: 'icon-user',
            frame: true,
            title: 'Users - Clearing Department',
            defaultType: 'textfield',
            bodyPadding: 5,
            fieldDefaults: {
                anchor: '100%',
                labelAlign: 'right'
            },
            items: [{
				fieldLabel: 'Group Name',
				name: 'THEGROUP',
				allowBlank: false
			},{
                fieldLabel: 'Clearing Department Name',
				name: 'CLEARINGDEPT',
				allowBlank: false
            },{
                fieldLabel: 'Owner',
				name: 'OWNER',
				allowBlank: false
            },{
                fieldLabel: 'Email Address',
				name: 'EMAILADDRESS',
				allowBlank: false,
				vtype: 'email'
            },{
                fieldLabel: 'Data Index Suffix',
				name: 'DATAINDEXSUFFIX',
				allowBlank: false
            }],
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                ui: 'footer',
                items: ['->', {
                    iconCls: 'icon-save',
                    itemId: 'save',
                    text: 'Save',
                    disabled: true,
                    scope: this,
                    handler: this.onSave
                }, {
                    iconCls: 'icon-user-add',
                    text: 'Create',
                    scope: this,
                    handler: this.onCreate
                }, {
                    iconCls: 'icon-reset',
                    text: 'Reset',
                    scope: this,
                    handler: this.onReset
                }]
            }]
        });
        this.callParent();
    },

    setActiveRecord: function(record){
        this.activeRecord = record;
        if (record) {
            this.down('#save').enable();
            this.getForm().loadRecord(record);
        } else {
            this.down('#save').disable();
            this.getForm().reset();
        }
    },

    onSave: function(){
        var active = this.activeRecord,
            form = this.getForm();

        if (!active) {
            return;
        }
        if (form.isValid()) {
            form.updateRecord(active);
            this.onReset();
        }
    },

    onCreate: function(){
        var form = this.getForm();

        if (form.isValid()) {
            this.fireEvent('create', this, form.getValues());
            form.reset();
        }

    },

    onReset: function(){
        this.setActiveRecord(null);
        this.getForm().reset();
    }
});

Ext.define('Writer.ClearanceGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.writerclearancegrid',

    requires: [
        'Ext.grid.plugin.CellEditing',
        'Ext.form.field.Text',
        'Ext.toolbar.TextItem'
    ],

    initComponent: function(){

        this.editing = Ext.create('Ext.grid.plugin.CellEditing');

        Ext.apply(this, {
            iconCls: 'icon-grid',
            frame: true,
            plugins: [this.editing],
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    iconCls: 'icon-delete',
                    text: 'Delete',
                    disabled: true,
                    itemId: 'delete',
                    scope: this,  
                    handler: this.onDeleteClick
                }]
            }],
            columns: [{
	            xtype: 'rownumberer',
				locked: true,
	            width: 50,
	            sortable: false
	        },{
                header: 'The Group',
                width: 50,
                sortable: true,
                dataIndex: 'THEGROUP'
            },{
                header: 'Clearing Department',
                width: 200,
                sortable: true,
                dataIndex: 'CLEARINGDEPT'
            },{
                header: 'Email Address',
                width: 200,
                sortable: true,
                dataIndex: 'EMAILADDRESS'
            },{
                header: 'Owner',
                width: 10,
				hidden: true,
                sortable: true,
                dataIndex: 'OWNER'
            },{
                header: 'Data Index Suffix',
                width: 10,
				hidden: true,
                sortable: true,
                dataIndex: 'DATAINDEXSUFFIX'
            }]
        });
        this.callParent();
        this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
    },
    
    onSelectChange: function(selModel, selections){
        this.down('#delete').setDisabled(selections.length === 0);
    },

    onSync: function(){
        this.storeclearing.sync();
    },

    onDeleteClick: function(){
        var selection = this.getView().getSelectionModel().getSelection()[0];
        if (selection) {
            this.store.remove(selection);
			
        }
    }

});

Ext.define('Writer.ClearingDept', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'CLEARINGDEPT',
        type: 'string'
    },{
        name: 'THEGROUP',
        type: 'string'
    },{
        name: 'OWNER',
        type: 'string'
    },{
        name: 'EMAILADDRESS',
        type: 'string'
    },{
        name: 'DATAINDEXSUFFIX',
        type: 'string'
    }]
});



//--------------------------------



Ext.require([
    'Ext.data.*',
    'Ext.tip.QuickTipManager',
    'Ext.window.MessageBox'
]);

Ext.onReady(function(){
    Ext.tip.QuickTipManager.init();
    
   
    
   var store = Ext.create('Ext.data.Store', {
        model: 'Writer.Email',
        autoLoad: true,
        autoSync: true,
        proxy: {
            type: 'ajax',
            api: {
                read: '../../../app/controller/clearance/setting/readsettings.cfm',
                create: '../../../app/controller/clearance/setting/createsettings.cfm',
                update: '../../../app/controller/clearance/setting/updatesettings.cfm',
                destroy: '../../../app/controller/clearance/setting/destroysettings.cfm'
            },
            reader: {
                type: 'json',
                successProperty: 'success',
                root: 'data',
                messageProperty: 'message'
            },
            writer: {
				writeAllFields: true,
				root: 'data'
            },
            listeners: {
                exception: function(proxy, response, operation){
                    Ext.MessageBox.show({
                        title: 'REMOTE EXCEPTION',
                        msg: operation.getError(),
                        icon: Ext.MessageBox.ERROR,
                        buttons: Ext.Msg.OK
                    });
                }
            }
        },
        listeners: {
            write: function(proxy, operation){
                if (operation.action == 'destroy') {
                    main.child('#form').setActiveRecord(null);
                }
                Ext.Msg.alert(operation.action, operation.resultSet.message);
            }
        }
    });
	
    var storeclearing = Ext.create('Ext.data.Store', {
        model: 'Writer.ClearingDept',
        autoLoad: true,
        autoSync: true,
        proxy: {
            type: 'ajax',
            api: {
                read: '../../../app/controller/clearance/setting/clrreadsettings.cfm',
                create: '../../../app/controller/clearance/setting/clrcreatesettings.cfm',
                update: '../../../app/controller/clearance/setting/clrupdatesettings.cfm',
                destroy: '../../../app/controller/clearance/setting/clrdestroysettings.cfm'
            },
            reader: {
                type: 'json',
                successProperty: 'success',
                root: 'data',
                messageProperty: 'message'
            },
            writer: {
				writeAllFields: true,
				root: 'data'
            },
            listeners: {
                exception: function(proxy, response, operation){
                    Ext.MessageBox.show({
                        title: 'REMOTE EXCEPTION',
                        msg: operation.getError(),
                        icon: Ext.MessageBox.ERROR,
                        buttons: Ext.Msg.OK
                    });
                }
            }
        },
        listeners: {
            write: function(proxy, operation){
                if (operation.action == 'destroy') {
                    main.child('#formclr').setActiveRecord(null);
                }
                Ext.Msg.alert(operation.action, operation.resultSet.message);
            }
        }
    });
	
	

    var main = Ext.create('Ext.container.Container', {
        padding: '0 0 0 20',
        width: '100%',
        height: 1300,
        renderTo: document.body,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            itemId: 'form',  
			flex: 2,
            xtype: 'writerform',
            margins: '0 0 10 0',
            listeners: {
                create: function(form, data){
                    store.insert(0, data);
                }
            }
        },{
            itemId: 'grid',
            xtype: 'writergrid',
            title: 'Email Template List',
            flex: 1,
            store: store,
            listeners: {
                selectionchange: function(selModel, selected) {
                    main.child('#form').setActiveRecord(selected[0] || null);
                }
            }
        },{
            itemId: 'formclr',  
			flex: 1,
            xtype: 'writerclearanceform',
            margins: '50 0 10 0',
            listeners: {
                create: function(form, data){
                    storeclearing.insert(0, data);
                }
            }
        },{
            itemId: 'gridclr',
            xtype: 'writerclearancegrid',
            title: 'Users - Clearing Department List',
            flex: 1,
            store: storeclearing,
            listeners: {
                selectionchange: function(selModel, selected) {
                    main.child('#formclr').setActiveRecord(selected[0] || null);
                }
            }
        }]
    });
});
